<template>
	<view>
		<u-navbar >
		
		</u-navbar>
		<scroll-view scroll-y class="page">
			  <!-- 头部logo-->
		  <view class="UCenter-bg">
			<!-- <image class="UCenter-bg-img" src="../../static/my_bg.jpeg" mode=""></image> -->
			<image class="user-img" src="../../static/logo.png" ></image>
			<view style="margin-left: 30rpx;">
				<view style="font-size: 40rpx;font-weight: 600;">
					姓名
				</view>
				<view style="font-size: 30rpx;margin-top: 10rpx;">
					签名！签名签名签名
					
				</view>
			</view>
			<view style="position: absolute;top: 20rpx;right: 20rpx;">
				<u-switch  active-color="#f37b1d" inactive-color="#eee" v-model="checked"></u-switch>
			</view>
		  </view>
		  <view class="padding flex text-center text-grey bg-white shadow-warp">
		    <view class="flex flex-sub flex-direction solid-right animation-slide-top" :style="[{animationDelay: '0.2s'}]" @click="jumpPage('我的佣金')">
		      <view class="text-xl text-orange">1630</view>
			  <view class="margin-top-sm"></text>可提佣金</view>
		    </view>
		    
		    <view class="flex flex-sub flex-direction animation-slide-top" :style="[{animationDelay: '0.2s'}]">
		      <view class="text-xl text-green">3个</view>
		      <view class="margin-top-sm">服务项目</view>
		    </view>
		  </view>
		  <!-- 列表list-->
		  <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
		    <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
		      <view class="content" @click="jumpPage('服务项目管理')">
		        <text class="cuIcon-favorfill text-yellow"></text>
		        <text class="text-grey">服务项目管理</text>
		      </view>
		    </view>
		    <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
		      <view class="content" @click="jumpPage('个人信息管理')">
		        <text class="cuIcon-peoplelist text-yellow"></text>
		        <text class="text-grey">个人信息管理</text>
		      </view>
		    </view>
			<view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.3s'}]" >

			  <view class="content">
			    <text class="cuIcon-phone text-yellow"></text>
			    <text class="text-grey">联系客服</text>
			  </view>
			</view>
			<navigator class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.7s'}]" url="/pages/login/index" hover-class="none">
				<view class="content" >
				    <text class="cuIcon-exit text-yellow"></text>
					<text class="text-grey">退出登录</text>
				</view>
			</navigator>
		  </view>
		  <view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	// import api from '@/api/api'
	export default {
		name: "people",
		data() {
			return {
				checked: false,
				personalList:{
				  avatar:'',
				  realname:'',
				  username:'',
				  post:''
				},
				  positionUrl:'/sys/position/list',
				  departUrl:'/sys/user/userDepartList',
				  userUrl:'/sys/user/queryById',
				  postUrl:'/sys/position/queryByCode',
				  userId:'',
				  id:''
			};
		},
		
		methods: {
			load(){
				if(!this.userId){
					
					return;
				}
				this.$http.get(this.userUrl,{params:{id:this.userId}}).then(res=>{
					console.log("res",res)
					 if (res.data.success) {
						let perArr = res.data.result
				        let avatar=(perArr.avatar && perArr.avatar.length > 0)? api.getFileAccessHttpUrl(perArr.avatar):'/static/avatar_boy.png'
						this.personalList.avatar =avatar
						this.personalList.realname = perArr.realname
						this.personalList.username = perArr.username
						this.personalList.depart = perArr.departIds
					    this.getpost(perArr.post)
					}
				}).catch(err => {
					console.log(err);
				});
				
			},
			getpost(code){
				if(!code||code.length==0){
					this.personalList.post='员工'
					return false;
				}
				this.$http.get(this.postUrl,{params:{code:code}}).then(res=>{
					console.log("postUrl",res)
					 if (res.data.success) {
						this.personalList.post=res.data.result.name
					}
				}).catch(err => {
					console.log(err);
				});
				
			},
			jumpPage(option){
				switch (option) {
					case "服务项目管理": {
						uni.navigateTo({
							url: '/pages/project/index'
						})
						break
					}
					case "个人信息管理": {
						uni.navigateTo({
							url: '/pages/userInfo/index'
						})
						break
					}
					case "我的佣金": {
						uni.navigateTo({
							url: '/pages/commission/index'
						})
						break
					}
				}	
			}
		}
	}
</script>

<style lang="scss" scoped>
.UCenter-bg {
	/* #ifdef MP-WEIXIN */
	/* background-image: url('https://static.jeecg.com/upload/test/blue_1595818030310.png'); */
	/* #endif */
	/* #ifndef MP-WEIXIN */
	/* background-image: url('/static/my_bg.jpeg'); */
	/* #endif */
	background:  linear-gradient(to left, #FBEAD8, #FBEAD8);;
  background-size: cover;
  height: 400rpx;
  display: flex;
  /* justify-content: center; */
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: row;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

  
}

.UCenter-bg text {
  opacity: 0.8;
}
.UCenter-bg-img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.user-img{
	width: 200rpx;
	height: 200rpx;
	border-radius:50% ;
	display: block;
	margin-left: 60rpx;
	flex-shrink: 0;
}
.UCenter-bg .gif-wave{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;  
  height: 100rpx;   
}

map,.mapBox{
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;  
  height: 100rpx;   
}

map,.mapBox{
  width: 750rpx;
  height: 300rpx;
}
</style>
